<template>
  <h3>jsplumb使用 ( 多列 )</h3>
  <div id="container">
    <div class="col1">
      <div
        v-for="item in list1"
        :key="item.nodeId"
        :id="item.nodeId"
        name="source"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="col2">
      <div
        v-for="item in list2"
        :key="item.nodeId"
        :id="item.nodeId"
        name="center"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="col3">
      <div
        v-for="item in list3"
        :key="item.nodeId"
        :id="item.nodeId"
        name="target"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script  setup>
import { ref, reactive, onMounted } from "vue";
import jsPlumb from "jsplumb";
//jsplumb使用
let $jsPlumb = jsPlumb.jsPlumb;
let jsPlumb_instance = null; // 缓存实例化的jsplumb对象
const list1 = reactive([
  { name: "name1", nodeId: "name1" },
  { name: "name2", nodeId: "name2" },
  { name: "name3", nodeId: "name3" },
  { name: "name4", nodeId: "name4" },
  { name: "name5", nodeId: "name5" },
  { name: "name6", nodeId: "name6" },
]);
const list2 = reactive([
  { name: "数据2-1", nodeId: "data2-1" },
  { name: "数据2-2", nodeId: "data2-2" },
  { name: "数据2-3", nodeId: "data2-3" },
  { name: "数据2-4", nodeId: "data2-4" },
  { name: "数据2-5", nodeId: "data2-5" },
  { name: "数据2-6", nodeId: "data2-6" },
]);
const list3 = reactive([
  { name: "数据3-1", nodeId: "data3-1" },
  { name: "数据3-2", nodeId: "data3-2" },
  { name: "数据3-3", nodeId: "data3-3" },
  { name: "数据3-4", nodeId: "data3-4" },
  { name: "数据3-5", nodeId: "data3-5" },
  { name: "数据3-6", nodeId: "data3-6" },
]);

onMounted(() => {
  showPlumb();
});

const showPlumb = () => {
  jsPlumb_instance = $jsPlumb.getInstance({
    Container: "container", // 选择器id
    EndpointStyle: { radius: 0.11, fill: "#fff" }, // 端点样式
    PaintStyle: { stroke: "#000", strokeWidth: 2 }, // 绘画样式，默认8px线宽  #456
    HoverPaintStyle: { stroke: "#1E90FF" }, // 默认悬停样式  默认为null
    ConnectionOverlays: [
      // 此处可以设置所有箭头的样式，因为我们要改变连接线的样式，故单独配置
      [
        "Arrow",
        {
          // 设置参数可以参考中文文档
          location: 1,
          length: 10,
          paintStyle: {
            stroke: "#000",
            fill: "#000",
          },
        },
      ],
    ],
    Connector: ["Straight"], // 要使用的默认连接器的类型：直线，折线，曲线等
    DrapOptions: { cursor: "crosshair", zIndex: 2000 },
  });

  console.log(jsPlumb_instance);

  jsPlumb_instance.batch(() => {
    for (let i = 0; i < list1.length; i++) {
      initLeaf(list1[i].nodeId, "source");
    }
    for (let i = 0; i < list2.length; i++) {
      initLeaf(list2[i].nodeId, "center");
    }
    for (let i = 0; i < list3.length; i++) {
      initLeaf(list3[i].nodeId, "target");
    }
  });

  jsPlumb_instance.bind("click", (conn, originalEvent) => {
    jsPlumb_instance.deleteConnection(conn);
  });
};

// 初始化具体节点
const initLeaf = (id, type) => {
  const ins = jsPlumb_instance;
  const elem = document.getElementById(id);
  if (type == "source") {
    ins.makeSource(elem, {
      anchor: "Right",
      allowLoopback: false,
      maxConnections: 1,
    });
  } else if (type == "center") {
    //中间列，即能主动连接，也能被动连接
    ins.makeSource(elem, {
      anchor: "Right",
      allowLoopback: false,
      maxConnections: 1,
    });
    ins.makeTarget(elem, {
      anchor: "Left",
      allowLoopback: false,
      maxConnections: 1,
    });
  } else {
    ins.makeTarget(elem, {
      anchor: "Left",
      allowLoopback: false,
      maxConnections: 1,
    });
  }
};
</script>

<style scoped lang="scss">
#container {
  position: relative;
  margin-top: 20px;
  width: 100%;
  height: 300px;
}

.col2,
.col1,
.col3 {
  float: left;
  text-align: center;
}

.col1 {
  width: 80px;
}

.col2 {
  width: 120px;
  margin-left: 80px;
}

.col3 {
  width: 120px;
  margin-left: 80px;
}

#container > div > div {
  line-height: 30px;
  margin: 0 0 17px 0;
  background: #ef631e;
  color: #fff;
}
</style>
